<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { inputFormatNum } from "@/utils";
import { useMainStore } from "@/stores";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
import type { Rule } from 'ant-design-vue/es/form';
import {
  MobileOutlined,
  LockOutlined,
  SafetyOutlined,
} from "@ant-design/icons-vue";
import api from "@/api";

const router = useRouter();
const stores = useMainStore();
const { nav_cfg, isLogin } = storeToRefs(stores);
const selectData = reactive(["手机验证码登录", "手机号密码登录"]);
const selectValue = ref(selectData[0]);
const bindData = reactive(["验证码关联", "店铺授权码关联"]);
const bindValue = ref(bindData[0]);
const type = ref('login')

const rules: Record<string, Rule[]> = {
  // phoneNumber: [
  //   { required: true, message: '请输入手机号', trigger: 'change' },
  //   { min: 0, max: 11, message: 'Length should be 0 to 11', trigger: 'blur' },
  // ],
  // password: [
  //   { required: true, message: '请输入密码', trigger: 'change' },
  // ],
  // vCode: [
  //   { required: true, message: '请输入验证码', trigger: 'change' },
  // ],
  // shopCode: [
  //   { required: true, message: '请输入店铺授权码', trigger: 'change' },
  // ]
}

interface FormState {
  phoneNumber: string;
  password?: string | null;
  vCode?: number | null;
  shopCode?: number | null;
}

const formState = reactive<FormState>({
  phoneNumber: '',
  password: null,
  vCode: null,
  shopCode: null,
});

const onFinish = (values: any) => {
  api.login({
    password: '123123',
    username: '12312'
  })
  stores.setToken("asdfasdfasd")
  router.push({ name: 'Home' })
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};

watch(() => formState.phoneNumber, (val, preVal) => {
  formState.phoneNumber = inputFormatNum(val, preVal);
});
</script>

<template>
  <div class="bg-#fff w-100% h-100% flex items-center justify-center color-#000">
    <div class="w-380px min-w-380PX bg-#fff shadow-[0_0_50px_rgba(0,0,0,0.05)] rounded-[8px] p-16px">
      <a-segmented v-if="type == 'login'" v-model:value="selectValue" block :options="selectData" size="large" />
      <a-segmented v-else v-model:value="bindValue" block :options="bindData" size="large" />
      <a-form :model="formState" class="p-16px" name="basic" :label-col="{ span: 24 }" :wrapper-col="{ span: 24 }"
        autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed" :rules="rules">
        <template v-if="type == 'login' || (type == 'bind' && bindValue.includes('验证码'))">
          <a-form-item label="手机号" name="phoneNumber" class="small-label">
            <a-input :maxlength="11" class="underline-input" v-model:value="formState.phoneNumber" placeholder="请输入手机号">
              <template #prefix>
                <MobileOutlined class="site-form-item-icon color-#d9d9d9" />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item label="验证码" v-if="selectValue.includes('验证码')" name="vCode" class="small-label">
            <a-flex>
              <a-input class="underline-input" v-model:value="formState.vCode" placeholder="请输入验证码">
                <template #prefix>
                  <SafetyOutlined class="site-form-item-icon color-#d9d9d9" />
                </template>
              </a-input>
              <a-button type="link">获取验证码</a-button>
            </a-flex>
          </a-form-item>
        </template>


        <a-form-item label="密码" v-if="type == 'login' && selectValue == '手机号密码登录'" name="password" class="small-label">
          <a-input-password class="underline-input" v-model:value="formState.password" placeholder="请输入密码">
            <template #prefix>
              <LockOutlined class="site-form-item-icon color-#d9d9d9" />
            </template>
          </a-input-password>
        </a-form-item>

        <a-form-item v-if="type == 'bind' && bindValue == '店铺授权码关联'" label="店铺授权码" name="shopCode" class="small-label">
          <a-input class="underline-input" v-model:value="formState.shopCode" placeholder="请输入店铺授权码">
            <template #prefix>
              <SafetyOutlined class="site-form-item-icon color-#d9d9d9" />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item>
          <a-flex class="mt-8px">
            <a-button class="w-40% mr-10px" size="large" v-if="type == 'login'" @click="type = 'bind'">关联已有账户</a-button>
            <a-button class="w-40% mr-10px" size="large" v-else @click="type = 'login'">上一步</a-button>
            <a-button class="w-100%" type="primary" html-type="submit" size="large">{{ type == 'login' ? '登录' :
              '确认关联' }}</a-button>
          </a-flex>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<style lang="postcss" scoped>
::v-deep(.small-label .ant-form-item-label) {
  padding-bottom: 0;

  label {
    color: #d9d9d9;
  }
}
</style>